{% block head %}
	<link href="{{ path }}css/bootstrap.css" rel="stylesheet">
	<link href="{{ path }}css/bootstrap-overrides.css" rel="stylesheet">
    <link rel="stylesheet" href="{{ path }}css/estilo_imprimir.css" type="text/css" media="print" />
    
{% endblock %}

{% load humanize %}

<script type="text/javascript">
	$( $(".btn[id^='pag']") ).click(function() {
        pago_id = $(this).attr('pago');
		$.ajax({
                url: "/cartera/estudiantes/pagar/",
                type: "POST",
                data : {pago_id:pago_id,
                        csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                         },
                dataType: "html",
                success: function(datos) {
                    $('#pagar').html(datos);
                }
            });
    });

</script>
<div class="widget widget-table">
	<div align="center">
        <p><h1>{{ configuracion.institucion }}</h1></p>
        <p><h2>Reporte de cartera</h2></p>
	</div>
	<table class="table table-striped table-bordered table-highlight" id="tblHistorial">
        <thead>
            <tr>
                <th width="10%" align="center">Documento</th>
                <th width="25%" align="center">Estudiante</th>
                <th width="10%" align="center">Periodo</th>
                <th width="10%" align="center">Facultad</th>
                <th width="5%" align="center">Semestre</th>
                <th width="10%" align="center">Crédito</th>
                <th width="10%" align="center">Saldo</th>
                <th width="5%" align="center">DM</th>
                <th width="5%" align="center">SM</th>
            </tr>
        </thead>
        <tbody>
            {% for lCiclo, vCiclo in estudiantes.items %}
                <tr class="{% cycle '' 'odd' %}">
                    <td align="center"><label>{{ vCiclo.estudiante.identificacion }}</label></td>
                    <td align="center"><label>{{ vCiclo.estudiante }}</label></td>
                    <td align="center"><label>{{ vCiclo.matricula.periodo }}</label></td>
                    <td align="center"><label>{{ vCiclo.matricula.facultad }}</label></td>
                    <td style="text-align:center"><label>{{ vCiclo.matricula.semestre }}</label></td>
                    <td style="text-align:right"><label>{{ vCiclo.matricula.valor_credito|intcomma  }}</label></td>
                    <td style="text-align:right"><label>{{ vCiclo.saldo|intcomma  }}</label></td>
                    <td style="text-align:center"><label>{{ vCiclo.matricula.dm }}</label></td>
                    <td style="text-align:center"><label>{{ vCiclo.matricula.sm }}</label></td>
                </tr>
            {% endfor %}
            </tbody>
    </table>
</div> <!-- /. widget-table -->